<script setup>
import Message from 'vue-m-message'
import VChart from 'vue-echarts'
import ChartCard from '@/components/chartCard/chartCard.vue'
import { tableCheckChane } from '@/utils/index.js'
import useUserStore from '@/store/modules/user.js'
import { getGreeting } from '@/utils/dayjs.js'
import customerVisitRecordService from '@/api/customerVisitRecord/index.js'
import SvgIcon from '@/components/SvgIcon/index.vue'

const orderType = ref('1')
const sgementedOptions = [
  { label: '下次跟进', value: '1' },
  { label: '久未跟进', value: '2' },
]
const pageConfig = ref({
  pageSize: 10,
  pageNum: 1,
})
const list = ref([])
const ids = ref([])
const total = ref(0)
const columns = ref([
  { type: 'checkbox', width: 50 },
  {
    field: 'customerName',
    title: '客户名称',
    minWidth: 150,
    showOverflow: 'tooltip',
    align: 'center',
  },
  {
    field: 'customerLinkman',
    title: '联系人',
  },
  {
    field: 'customerPhone',
    title: '联系人电话',
    minWidth: 120,
    align: 'center',
    showOverflow: 'tooltip',
  },
  {
    field: 'nextVisitTime',
    title: '下次跟进时间',
    align: 'center',
    minWidth: 120,
  },
  {
    field: 'overDayNum',
    title: '逾期天数',
    align: 'center',
    minWidth: 180,
    showOverflow: 'tooltip',
  },
])
const columnsTwo = ref([
  { type: 'checkbox', width: 50 },
  {
    field: 'customerName',
    title: '客户名称',
    minWidth: 150,
    showOverflow: 'tooltip',
    align: 'center',
  },
  {
    field: 'linkman',
    title: '联系人',
  },
  {
    field: 'customerPhone',
    title: '联系人电话',
    minWidth: 120,
    align: 'center',
    showOverflow: 'tooltip',
  },
  {
    field: 'visitTime',
    title: '上次拜访时间',
    align: 'center',
    minWidth: 120,
  },
  {
    field: 'overDayNum',
    title: '多少天未跟进',
    align: 'center',
    minWidth: 180,
    showOverflow: 'tooltip',
  },
])
const userStore = useUserStore()

const navigateTheList = ref([
  {
    name: '客户管理',
    id: 1,
    icon: 'kehu',
    url: '/peoples/customerInformation',
  }, {
    name: '合同管理',
    id: 2,
    icon: 'hetong',
    url: '/documentation/underreview',
  }, {
    name: '专利管理',
    id: 3,
    icon: 'zhuanli',
    url: '/patent/patentinfo',
  }, {
    name: '财务管理',
    id: 4,
    icon: 'caiwu',
    url: '/finance/zlAgency',
  }, {
    name: '业务管理',
    id: 5,
    icon: 'yewu',
    url: '/product/business',
  }, {
    name: '官费管理',
    id: 6,
    icon: 'guanfeijiaona',
    url: '/sys_gfgl/djfgl',
  },
])
const title = import.meta.env.VITE_APP_TITLE
const option = ref({
  tooltip: {
    trigger: 'item',
  },
  legend: {
    top: '5%',
    left: 'center',
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      padAngle: 5,
      itemStyle: {
        borderRadius: 10,
      },
      label: {
        show: false,
        position: 'center',
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 40,
          fontWeight: 'bold',
        },
      },
      labelLine: {
        show: false,
      },
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' },
      ],
    },
  ],
})
onMounted(() => {
  getList()
})

function handlePageChange({ currentPage, pageSize }) {
  pageConfig.value.pageNum = currentPage
  pageConfig.value.pageSize = pageSize
  getList()
}

function handleCheckChange(data) {
  ids.value = tableCheckChane(data, 'scvrId')
}

function getList() {
  const params = {
    ...pageConfig.value,
    orderType: orderType.value,
  }
  customerVisitRecordService.HomeTimeVisitRecordList(params).then((res) => {
    list.value = res.rows
    total.value = res.total
  })
}

function handleSegmentChange(val) {
  ids.value = []
  getList()
}

function handleBatchFollowUp() {
  const type = orderType.value
  const idsArr = ids.value.join(',')
  if (type === '1') {
    customerVisitRecordService.updateVisitStatus(idsArr).then(() => {
      Message.success('批量跟进成功')
      ids.value = []
      getList()
    })
  }
  else {
    customerVisitRecordService.updateVisitRecord(idsArr).then(() => {
      Message.success('批量跟进成功')
      ids.value = []
      getList()
    })
  }
}
function handleDateChange(date) {
  console.log(date)
}
</script>

<template>
  <div class="app-container home space-y-5">
    <el-card shadow="never" class="welcome-card">
      <div class="welcome-card__content flex items-center">
        <img src="@/assets/images/welcome-head.png" alt="" class="w-47 h-40">
        <div>
          <div class="font-400 text-lg">
            {{ getGreeting() }}
            {{ userStore.userInfo.userName }}
            <span>欢迎使用 {{ title }}</span>
          </div>
          <div v-if="userStore.userInfo.dept" class="font-300 text-sm mt-2">
            所属部门：{{ userStore.userInfo.dept.deptName }}
          </div>
        </div>
      </div>
    </el-card>
    <el-card shadow="never">
      <div class="header mb-2">
        <div class="flex">
          <div class="font-700 text-xl">
            快捷导航
          </div>
        </div>
      </div>
      <ul class="grid grid-cols-6 gap-12 mt-5">
        <li v-for="item in navigateTheList" :key="item.id" class="flex items-center cursor-pointer nav-list" @click="() => { $router.push(item.url) }">
          <div class="nav-icon">
            <SvgIcon :name="item.icon" class="text-3xl flex items-center relative left-[1px]" />
          </div>
          <div class="nav-name">
            {{ item.name }}
          </div>
        </li>
      </ul>
    </el-card>
<!--    <div class="grid grid-cols-2 gap-3">-->
<!--      <ChartCard title="客户统计类型" @date-change="handleDateChange">-->
<!--        <VChart class="chart" :option="option"  />-->
<!--      </ChartCard>-->
<!--      <ChartCard title="客户统计类型">-->
<!--        <VChart class="chart" :option="option" />-->
<!--      </ChartCard>-->
<!--    </div>-->
    <el-card shadow="never">
      <div class="header mb-2">
        <div class="flex">
          <div class="font-700 text-xl">
            跟进客户列表
          </div>
        </div>
        <div class="flex justify-between mt-3">
          <el-segmented v-model="orderType" :options="sgementedOptions" size="default"  @change="handleSegmentChange" />
          <el-button
            v-hasPermi="['system:customerInformation:add']" type="primary" :disabled="ids.length === 0"
            @click="handleBatchFollowUp"
            class="ml-2"
          >
            批量跟进
            <SvgIcon name="followUp" class="text-base ml-2" />
          </el-button>
          <RightToolbar />
        </div>
      </div>
      <vxe-grid
        :data="list"
        :columns="orderType === '1' ? columns : columnsTwo"
        :pager-config="{
          pageSize: pageConfig.pageSize,
          currentPage: pageConfig.pageNum,
          total,
        }"
        border="default"
        :column-config="{ resizable: true }"
        header-cell-class-name="headerCellClass"
        :checkbox-config="{ reserve: true }"
        :row-config="{
          keyField: 'scvrId',
        }"
        @page-change="handlePageChange"
        @checkbox-all="handleCheckChange"
        @checkbox-change="handleCheckChange"
      />
    </el-card>
  </div>
</template>

<style scoped lang="scss">
.home {
  .welcome-card {
    border-radius: 10px;
    background: var(--el-color-white) linear-gradient(120deg, var(--el-color-primary-light-9) 10%, var(--el-color-white)) no-repeat;
  }
}
.nav-list{
  .nav-icon {
    display: inline-block;
    width: 50px;
    height: 50px;
    font-size: 30px;
    line-height: 50px;
    color: var(--el-color-primary);
    background: var(--el-color-primary-light-9);
    border-radius: var(--el-border-radius-base);
    transition: all ease-in-out .3s;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
  }
  &:hover {
    .nav-icon {
      color: var(--el-color-white);
      background: var(--el-color-primary);
      transform: scale(1.1);
    }
    .nav-name{
      color: var(--el-color-primary);
      transition: all ease-in-out .3s;
    }
  }
}
.chart {
  height: 400px;
}
</style>
